<template>
  <div class="sq-left-top d-flex-c overflow-hidden">
    <div class="panel-header-bg flex-between">
      <div class="title-text">
        雨情信息
      </div>
      <SwitchTab
        :tab-list="queryTabList"
        v-model="yqQueryType"
      />
    </div>
    <div class="d-flex-c panel-zone-big-bg left-top flex-1 overflow-hidden">
      <div class="flex-between m-b-mini fixed-top-height">
        <div
          class="panel-zone-bg flex-1 m-r-mini full-height"
        >
          <div class="little-title m-b-mini">
            面雨量情况
          </div>
          <div class="d-flex-c flex-1">
            <div
              class="area-rainfall-title flex-between jc-c flex-0"
              v-show="areaRainfallData.length"
            >
              <div
                v-for="(item,index) in areaRainfallData"
                :key="index"
                class="flex-1 d-flex-c jc-c ai-c area-rainfall-title-item"
              >
                <div class="">
                  <span class="f-20 ff-agencyyr c-text-blue f-w7">{{ item.value }}</span>
                  <span class="f-12 c-white">mm</span>
                </div>
                <el-tooltip
                  effect="dark"
                  :content="item.names"
                  :disabled="item.tooltipDisabled"
                  placement="bottom"
                  popper-class="blue-popper"
                >
                  <div class="f-14 c-white">
                    {{ item.desc }}
                  </div>
                </el-tooltip>
              </div>
            </div>
            <div class="flex-1">
              <BKChart
                :option="areaRainfallOptions"
                class="full-box"
              />
            </div>
          </div>
        </div>
        <RainAlarm class="panel-zone-bg  flex-0 full-height" />
      </div>

      <FeatureStatistics
        :columns="featureColumns"
        class="full-width flex-1 flex-box-height"
      />
    </div>
  </div>
</template>

<script>
import SwitchTab from '@/views/business/ysqjcdp/components/switch-tab.vue'
import RainAlarm from '@/views/business/ysqjcdp/components/business/rain-alarm.vue'
import FeatureStatistics from '@/views/business/ysqjcdp/components/business/feature-statistics.vue'
import { getBarOption, verticalXAXisLabel } from '@/components/chart/echart-utils'

export default {
  name: 'SqLeftTop',
  components: { SwitchTab, RainAlarm, FeatureStatistics },
  data () {
    return {
      yqQueryType: '1',
      areaRainfallOptions: null,
      featureColumns: [
        {
          title: '时段',
          field: 'type',
          width: 90
        },
        {
          title: '雨量',
          field: 'rainValue',
          width: 70
        },
        {
          title: '站名',
          field: 'stnm',
          width: 100
        },
        {
          title: '起始日期',
          field: 'tm',
          minWidth: 100
        },
        {
          title: '历史最大(mm)',
          field: 'historyMixValue',
          width: 120
        }
      ],
      areaRainfallData: []
    }
  },
  computed: {
    queryTabList () {
      return [
        {
          label: '今日以来',
          value: '1'
        },
        {
          label: new Date().getHours() + '时以来',
          value: '2'
        }, {
          label: '1h',
          value: '3'
        }, {
          label: '3h',
          value: '4'
        },
        {
          label: '6h',
          value: '5'
        },
        {
          label: '12h',
          value: '6'
        },
        {
          label: '24h',
          value: '7'
        }
      ]
    }
  },
  watch: {
    yqQueryType: {
      immediate: true,
      handler () {
        this.setAreaRainfallOptions()
      }
    }
  },
  methods: {
    async setAreaRainfallOptions () {
      const res = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectActualPrecipitation', {
        type: this.yqQueryType
      })
      const data = res.filter(item => {
        return item.code !== this.$store.state.user.userInfo.dept.LEADER
      })
      this.calculateAreaRainfallInfo(data)

      const result = getBarOption({
        yAxisName: 'mm',
        xAxis: data.map(r => r.name),
        series: [
          {
            name: '降雨量',
            type: 'bar',
            color: ['#0382FC00', '#0382fc'],
            data: data.map(r => r.rainValue)
          }
        ]
      })
      if (!data.length) {
        result.grid.left = 20
      }
      result.grid.bottom = -6
      result.series[0].itemStyle.borderRadius = [12, 12, 0, 0]
      result.series[0].barMaxWidth = 12
      result.xAxis.axisLabel.color = '#FFFFFF'
      result.yAxis.axisLabel.color = '#FFFFFF'
      result.xAxis.axisLine = {
        show: true,
        lineStyle: {
          color: 'rgba(233,237,240,0.1)'
        }
      }
      result.xAxis.axisLabel.interval = 0
      result.xAxis.axisLabel.formatter = verticalXAXisLabel
      result.yAxis.splitLine.show = false
      result.yAxis.axisLine = {
        show: true,
        lineStyle: {
          color: 'rgba(233,237,240,0.1)'
        }
      }
      // result.yAxis.splitLine = {
      //   show: true,
      //   lineStyle: {
      //     color: 'rgba(233,237,240,0.2)'
      //   }
      // }
      result.yAxis.nameTextStyle = {
        color: '#C4CBD9',
        fontSize: '14px',
        padding: [0, 0, 0, -20]
      }
      result.tooltip.appendToBody = true
      this.areaRainfallOptions = result
    },
    calculateAreaRainfallInfo (data) {
      if (data.every(item => Number(item.rainValue) === 0)) {
        this.areaRainfallData = []
        return
      }
      const maxObject = data.reduce((prev, current) => {
        return (Number(prev.rainValue) || 0) > (Number(current.rainValue) || 0) ? prev : current
      })
      const minObject = data.reduce((prev, current) => {
        return (Number(prev.rainValue) || 0) < (Number(current.rainValue) || 0) ? prev : current
      })
      const maxArray = data.filter(item => item.rainValue === maxObject.rainValue).map(obj => obj.name)
      const minArray = data.filter(item => item.rainValue === minObject.rainValue).map(obj => obj.name)
      const maxLength = maxArray.length
      const minLength = minArray.length
      this.areaRainfallData = [
        {
          desc: maxArray[0] + (maxLength > 1 ? '...' : '') + '最大',
          value: maxObject.rainValue,
          tooltipDisabled: maxLength <= 1,
          names: maxArray.join(',')
        },
        {
          desc: minArray[0] + (minLength > 1 ? '...' : '') + '最小',
          value: minObject.rainValue,
          tooltipDisabled: minLength <= 1,
          names: minArray.join(',')
        }
      ]
    }

  }
}
</script>

<style lang="scss" scoped>
.sq-left-top {
  flex-grow: 2; /* 增加放大优先级 */
  flex-shrink: 0; /* 保持缩小优先级不变 */
}

.flex-box-height {
  min-height: 180px;
  // max-height: 260px;
}

.fixed-top-height {
  // min-height: 260px;
  height: 290px;
}

.area-rainfall-title {
  // padding: ;
  background-image: url("~@/assets/images/ysqjcdp/area-rainfall-title-bg.png");
  background-size: 100% 100%;
  width: 100%;
  height: 58px;

  .area-rainfall-title-item:not(:last-child) {
    border-right: 1px solid;
    border-image: linear-gradient(0deg, #1263cd, #044ea6) 1 1;
  }
}
</style>
